<!DOCTYPE html>
<html lang='en' xmlns:th="http://www.w3.org/1999/xhtml">
	<meta charset='UTF-8'>
<head th:include="include :: header(首页)"></head>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
<style>
	html,
	body,
	#container {
		width: 100%;
		height: 100%;
		margin: 0;
	}
</style>
<body class="lyear-layout-web gray-bg" style="height: 100%;">
<div class="lyear-layout-web">
	<div class="lyear-layout-container">

		<!--左侧导航-->
		<div th:include="include :: aside(首页)"></div>
		<!--	头部导航-->
		<div th:include="include :: top(首页)"></div>

		<main class="lyear-layout-content" style="padding-top:0px">
			<div class="container-fluid">

				<div class="row">
					<div class="col-sm-6 col-lg-3">
						<div class="card bg-primary">
							<div class="card-body clearfix">
								<div class="pull-right">
									<p class="h6 text-white m-t-0">今日收入</p>
									<p class="h3 text-white m-b-0" id="gross">>_<</p>
								</div>
								<div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-currency-cny fa-1-5x"></i></span> </div>
							</div>
						</div>
					</div>

					<div class="col-sm-6 col-lg-3">
						<div class="card bg-danger">
							<div class="card-body clearfix">
								<div class="pull-right">
									<p class="h6 text-white m-t-0">今日利润</p>
									<p class="h3 text-white m-b-0" id="profit">>_<</p>
								</div>
								<div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-square-inc-cash fa-1-5x"></i></span> </div>
							</div>
						</div>
					</div>

					<div class="col-sm-6 col-lg-3">
						<div class="card bg-success">
							<div class="card-body clearfix">
								<div class="pull-right">
									<p class="h6 text-white m-t-0">成交量</p>
									<p class="h3 text-white m-b-0" id="total">>_<</p>
								</div>
								<div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-counter fa-1-5x"></i></span> </div>
							</div>
						</div>
					</div>

					<div class="col-sm-6 col-lg-3">
						<div class="card bg-purple">
							<div class="card-body clearfix">
								<div class="pull-right">
									<p class="h6 text-white m-t-0">未读消息</p>
									<p class="h3 text-white m-b-0" id="notity">>_<</p>
								</div>
								<div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i class="mdi mdi-comment-outline fa-1-5x"></i></span> </div>
							</div>
						</div>
					</div>
				</div>

				<div class="row">
					<div class="col-lg-6">
						<div class="card">
							<div class="card-header">
								<h4 style="font-weight: bold">交易历史记录</h4>
							</div>
							<div class="card-body">
								<div class="js-chartjs-lines" id="js-chartjs-lines" style="width: 100%;height: 500px;"></div>
							</div>
						</div>
					</div>
					<div class="col-lg-6">
						<div class="card">
							<div class="card-header">
								<h4 style="font-weight: bold">店铺分布</h4>
							</div>
							<div class="card-body">
								<div class="" id="js-chartjs-map" style="width: 100%;height: 500px;">
									<div id="container"></div>
<!--									<div class="input-card" style="position: absolute;right: 3.5rem;">-->
<!--										<h4>选择省份</h4>-->
<!--										<select name="code-list" id="adcode-list" style="height: 28px;margin-right: 10px;" onchange="changeAdcode(this.value)">-->
<!--											<option value="-1">选择省份</option>-->
<!--										</select>-->
<!--										<h4>选择层级</h4>-->
<!--										<select name="code-list" style="height: 28px;margin-right: 10px;" onchange="changeDepth(this.value)">-->
<!--											<option value="0">0 - 显示省级</option>-->
<!--											<option value="1">1 - 显示市级</option>-->
<!--											<option selected value="2">2 - 显示区/县级</option>-->
<!--										</select>-->
<!--									</div>-->
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="row">

					<div class="col-lg-12">
						<div class="card">
							<div class="card-header">
								<h4>即将过期</h4>
							</div>
							<div class="card-body">
								<div class="table-responsive">
									<table class="table table-hover">
										<thead>
										<tr>
											<th>编号</th>
											<th>水果名称</th>
											<th>截止日期</th>
											<th>剩余时间</th>
											<th>库存</th>
										</tr>
										</thead>
										<tbody id="toMaturity">

										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>

				</div>

			</div>
		</main>
	</div>
</div>
</body>
<div th:replace="include::footer"></div>
<script src="/webapp/js/plugins/echarts/echarts-all.js"></script>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=f27b879e0230042b23ddb9aea32bc25b&plugin=Map3D,AMap.DistrictLayer,AMap.Scale,AMap.ToolBar"></script>
<script src="https://a.amap.com/Loca/static/mock/adcodes.js"></script>
	<script src="/webapp/js/index.js"></script>
</html>